<template>
    <div class="filter">
        <div class="filter-item">
            <span class="text" :class="activeIndex==1? 'active':''" @click="handleTab(1)">默认</span>
        </div>
        <div class="filter-item">
            <span class="text" :class="activeIndex==2? 'active':''" @click="handleTab(2)">销量</span>
            <div class="arrow" >
                <i class="i-arrow-up" :class="sales == 'up' ? 'arrow-active':''"></i>
                <i class="i-arrow-down" :class="sales == 'down' ? 'arrow-active':''"></i>
            </div>
        </div>
        <div class="filter-item">
            <span class="text" :class="activeIndex== 3? 'active':''" @click="handleTab(3)">价格</span>
            <div class="arrow">
                <i class="i-arrow-up" :class="price == 'up' ? 'arrow-active':''"></i>
                <i class="i-arrow-down" :class="price == 'down' ? 'arrow-active':''"></i>
            </div>
        </div>
        <div class="filter-item w-30">
            <i class="i-single" v-if="range === 'single'" @click="handleRange('single')"></i>
            <i class="i-double" v-else @click="handleRange('double')"></i>
            <div class="text">| 筛选</div>
            <i class="i-filter" @click="handleFilter"></i>
        </div>
        <van-popup v-model="show" position="right">
            <div class="filter-panel" :style="filterStyle">
                <div class="filter-panel__title">筛选</div>
                <div class="filter-panel__content">
                    <div class="filter-price">
                        <div class="filter-price__title">价格区间</div>
                        <div class="filter-price__condition">
                            <input type="number" class="inpt-price" v-model="minPrice" placeholder="最低价"/>
                            <span class="to">——</span>
                            <input type="number" class="inpt-price" v-model="maxPrice" placeholder="最高价"/>
                        </div>
                        <div class="filter-price__tab">
                            <span class="filter-price__tab__item" :class="val.active===1? 'active':''" @click="handleSelectPrice(val)"  v-for="val in priceInterval">{{val.priceStr}}</span>
                            <!-- <span class="filter-price__tab__item" @click="handleSelectPrice(50,100)">50-100</span>
                            <span class="filter-price__tab__item" @click="handleSelectPrice(100,200)">100-200</span>
                            <span class="filter-price__tab__item" @click="handleSelectPrice(200,500)">200-500</span> -->
                        </div>
                    </div>
                    <div class="filter-category">
                        <div class="filter-category__title">分类</div>
                        <ul class="category-panel">
                            <li class="category-panel__item" :class="val.active===1? 'active':''" @click="handleSelect(val)" v-for="val in categoryList">{{val.name}}</li>
                            <!-- <li class="category-panel__item">护肤用品</li>
                            <li class="category-panel__item">酒水</li>
                            <li class="category-panel__item">养生</li>
                            <li class="category-panel__item">茶叶</li> -->
                            <div class="clear"></div>
                        </ul>
                    </div>
                </div>
                <div class="filter-panel__action">
                    <button class="btn-reset" @click="handleReset">清空</button>
                    <button class="btn-filter" @click="handleSubmit">确定</button>
                </div>
            </div>
        </van-popup>

   </div>
</template>
<script>
import { getCategory }  from '@/api/goods'   
export default {
    name: "filterbar",
    data() {
        return {
            filterStyle: {
                height: "",
                width: ""
            },
            activeIndex: 1,
            sales:'',
            price: '',
            range: 'single',
            show: false,
            parentId: '',
            categoryList: [],
            minPrice: '',
            maxPrice: '',
            priceInterval: [
                {id:1, minPrice:1,maxPrice:50,priceStr: '1-50', active: 0},
                {id:2, minPrice:50,maxPrice:100,priceStr: '50-100', active: 0},
                {id:3, minPrice:100,maxPrice:200,priceStr: '100-200', active: 0},
                {id:4, minPrice:200,maxPrice:500,priceStr: '200-500', active: 0},

            ],
            orderList: []
        }
    },
    created() {
        this.filterStyle.height = window.innerHeight+'px';
        this.filterStyle.width = window.innerWidth * 0.8+'px';
        this.parentId = sessionStorage.getItem('catePid') ? sessionStorage.getItem('catePid'): ''
        this.getFilterCate()
    },
    methods: {
        getFilterCate() {
            const data = {}
            data.level = 'L2'
            if(this.parentId) {
                data.parentId = this.parentId
            }
            getCategory(data).then(response => {
                if (response.data && response.data.length > 0) {
                    for(const item of response.data) {
                        const temp = {}
                        temp.id = item.id
                        temp.name = item.name
                        temp.active = 0
                        this.categoryList.push(temp)
                    }
                } 
            })
        },
        handleTab(index) {
            this.activeIndex = index
            let data = {}
            if (index === 2) {
                console.log(this.sales)
                this.price = ''
                data.sidx = 'sellVolume'
                if(this.sales === "") {
                    this.sales = 'up'
                    data.sort = 'asc'
                }
                else if(this.sales === 'down') {
                    this.sales = 'up'
                    data.sort = "asc"
                } else if(this.sales === 'up'){
                    this.sales = 'down'
                    data.sort = "desc"
                }
                
            } else if(index === 3) {
                this.sales = ''
                data.sidx = 'price'
                if(this.price === "") {
                    this.price = 'up'
                    data.sort = 'asc'
                }
                else if(this.price === 'down') {
                    this.price = 'up'
                    data.sort = "asc"
                } else if(this.price === 'up') {
                    this.price = 'down'
                    data.sort = "desc"
                }
            } else if(index === 1) {
                this.sales = ''
                this.price = ''
                data.sidx = 'id'
                data.sort = 'desc'
            }
            this.$emit('order-result',data)
        },
        handlePriceSort() {
            let data = {}
            data.sidx = 'price'
            if(this.price === 'down') {
                this.price = 'up'
                data.sort = "asc"
            } else {
                this.price = 'down'
                data.sort = "desc"
            }
            this.$emit('order-result',data)
        },
        handleSalseSort() {
            let data = {}
            data.sidx = 'sellVolume'
            if(this.sales === 'down') {
                this.sales = 'up'
                data.order = "asc"
            } else {
                this.sales = 'down'
                data.order = "desc"
            }
            this.$emit('order-result',data)
        },
        handleRange(range) {
            if(range === 'single') {
                this.range = 'double'
                this.$emit('range-result', 2)
            } else {
                this.range = 'single'
                this.$emit('range-result', 1)
            }
        },
        handleFilter() {
            this.show = true
        },
        handleSelect(val) {
            for(var i = 0; i <this.categoryList.length; i++) {
                if(this.categoryList[i].id == val.id ){
                    if(this.categoryList[i].active ==1) {
                        this.categoryList[i].active = 0
                    } else {
                        this.categoryList[i].active = 1
                    }
                }
            }
        
        },
        handleSelectPrice(val) {
            for(var i = 0; i <this.priceInterval.length; i++) {
                if(this.priceInterval[i].id == val.id ){
                    this.minPrice = val.minPrice
                    this.maxPrice = val.maxPrice
                    this.priceInterval[i].active = 1
                } else {
                    this.priceInterval[i].active = 0
                }
            }
        },
        handleReset() {
            this.maxPrice = ''
            this.minPrice = ''
            for(var i = 0; i <this.categoryList.length; i++) {
                this.categoryList[i].active = 0
            }
            for(var i = 0; i <this.priceInterval.length; i++) {
                this.priceInterval[i].active = 0
            }
        },
        handleSubmit() {
            const data = {}
            data.minPrice = this.minPrice
            data.maxPrice = this.maxPrice
            let cids = []
            for(var i = 0; i <this.categoryList.length; i++) {
                if(this.categoryList[i].active){
                    cids.push(this.categoryList[i].id)
                }
            }
            data.cIds = cids.join(','); 
            this.show = false
            this.$emit('filter-result', data)
        }
    }
}
</script>